<template>
  <div class="app-container">
    <avue-crud ref="crud"
               :page.sync="page"
               :data="tableData"
               :permission="permissionList"
               :table-loading="tableLoading"
               :option="ProductAttributeOption"
               :before-open="beforeOpen"
               v-model="form"
               @on-load="getPage"
               @refresh-change="refreshChange"
               @row-update="handleUpdate"
               @row-save="handleSave"
               @row-del="handleDel"
               @sort-change="sortChange"
               @search-change="searchChange"
               @selection-change="selectionChange">

    </avue-crud>
  </div>
</template>

<script>
import {
  delProductAttribute,
  addProductAttribute,
  updateProductAttribute,
  exportProductAttribute,
  getPage} from "@/api/erp/product/attribute/attribute";
import {ProductAttributeOption} from '@/const/crud/erp/productAttribute'
import {checkPermi, checkRole} from "@/utils/permission"

export default {
  name: "ProductAttribute",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      tableData: [],
      tableLoading: false,
      // 商品属性表格数据
      productAttributeList: [],
      // 弹出层标题
      title: "",
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
        // pageSizes: [2,4,6,8],
        ascs: [],//升序字段
        descs: 'create_time'//降序字段
      },
      // 是否显示弹出层
      open: false,
      ProductAttributeOption: ProductAttributeOption,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        createId: null,
        updateId: null,
        name: null,
        description: null,
        attributePrice: null,
        version: null,
        productId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  computed: {
      permissionList() {
          return {
              addBtn: checkPermi(['product:attribute:create']),
              delBtn: checkPermi(['product:attribute:delete']),
              editBtn: checkPermi(['product:attribute:update']),
              viewBtn: checkPermi(['product:attribute:query'])
          };
      },
  },   
  methods: {
    /** 查询商品属性列表 */
    getList() {
      this.loading = true;
      getPage(this.queryParams).then(response => {
        this.productAttributeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有商品属性数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportProductAttribute(queryParams);
        }).then(response => {
          this.download(response.msg);
        })
    },

    /**
     * 刷新回调
     */
    refreshChange(page) {
      this.getPage(this.page)
    },

    beforeOpen(done,type){
      done()
    },

    searchChange(params,done) {
      params = this.filterForm(params)
      this.paramsSearch = params
      this.page.currentPage = 1
      this.getPage(this.page, params)
      done()
    },

    sortChange(val) {
      let prop = val.prop ? val.prop.replace(/([A-Z])/g, "_$1").toLowerCase() : '';
      if (val.order == 'ascending') {
        this.page.descs = []
        this.page.ascs = prop
      } else if (val.order == 'descending') {
        this.page.ascs = []
        this.page.descs = prop
      } else {
        this.page.ascs = []
        this.page.descs = []
      }
      this.getPage(this.page)
    },

    selectionChange(list){
      this.selectionData = list
    },

    getPage(page, params) {
      this.tableLoading = true
      getPage(Object.assign({
        current: page.currentPage,
        size: page.pageSize,
        descs: this.page.descs,
        ascs: this.page.ascs,
      }, params, this.paramsSearch)).then(response => {
        let tableData = response.data.records
        this.tableData = tableData
        this.page.total = parseInt(response.data.total)
        this.page.currentPage = parseInt(page.currentPage)
        this.page.pageSize = page.pageSize
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },

    /**
     * @title 数据更新
     * @param row 为当前的数据
     * @param index 为当前更新数据的行数
     * @param done 为表单关闭函数
     *
     **/
    handleUpdate: function (row, index, done, loading) {
      let needUpdate = false
      // 遍历比较是否需要更新
      for (let key in row) {
        if(row[key] != this.tableData[index][key]) {
          needUpdate = true
        }
      }
      if (needUpdate) {
        updateProductAttribute(row).then(data => {
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          })
          done()
          this.getPage(this.page)
        }).catch(() => {
          loading()
        })
      } else {
        done()
      }
    },

    /**
     * @title 数据添加
     * @param row 为当前的数据
     * @param done 为表单关闭函数
     *
     **/
    handleSave: function (row, done, loading) {
      addProductAttribute(row).then(data => {
        this.$message({
          showClose: true,
          message: '添加成功',
          type: 'success'
        })
        done()
        this.getPage(this.page)
      }).catch(() => {
        loading()
      })

    },
    /**
     * @title 数据逻辑删除
     * @param row 为当前的数据
     * @param index 为当前删除数据的行数
     *
     **/
    handleDel: function (row, index) {
      var _this = this
      this.$confirm('是否确认删除此数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        delProductAttribute(row.id).then(data => {
          _this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          })
          _this.getPage(_this.page)
        })
      })
    },
  }
};
</script>
